<template>
  <div class="common-container">
    <div class="mod-hd">
      <h2>旅行商城</h2>
      <ul class="tab hotSaleNav">
        <li><a class="on" href="javascript:void(0);">景点门票</a></li>
        <li><a href="javascript:void(0);" class="">一日游/多日游</a></li>
        <li><a href="javascript:void(0);">酒店套餐</a></li>
        <li><a href="javascript:void(0);">交通用车</a></li>
        <li><a href="javascript:void(0);">当地玩乐</a></li>
      </ul>
    </div>
    <div class="common-list">
      <ul class="sales-list clearfix">
        <li class="item">
          <a href="/sales/2655716.html" target="_blank">
            <div class="image">
              <img
                src="https://sales.mafengwo.net/mfs/s18/M00/0E/54/CoUBYGCkwvGAHfRDAAPFcDqswVo61.jpeg?imageMogr2%2Fthumbnail%2F%21238x134r%2Fgravity%2FCenter%2Fcrop%2F%21238x134%2Fquality%2F100"
                height="134"
                width="238"
              />
              <div class="mark-tag">景区/场馆</div>
            </div>
            <div class="caption">
              <h3>广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票</h3>
              <span class="sell">已售 378</span>
              <span class="price"><b>￥295</b>起</span>
            </div>
          </a>
        </li>
        <li class="item">
          <a href="/sales/2600745.html" target="_blank">
            <div class="image">
              <img
                src="https://sales.mafengwo.net/mfs/s11/M00/C5/2C/wKgBEFqzXviAHFIJAALcMrTLifM09.jpeg?imageMogr2%2Fthumbnail%2F%21238x134r%2Fgravity%2FCenter%2Fcrop%2F%21238x134%2Fquality%2F100"
                height="134"
                width="238"
              />
              <div class="mark-tag">景区/场馆</div>
            </div>
            <div class="caption">
              <h3>广州正佳广场正佳极地海洋世界正佳海洋馆门票（日场/夜场电子门票即买即用/无需取票/直接扫码入园）</h3>
              <span class="sell">已售 518</span>
              <span class="price"><b>￥112.5</b>起</span>
            </div>
          </a>
        </li>
        <li class="item">
          <a href="/sales/2248239.html" target="_blank">
            <div class="image">
              <img
                src="https://sales.mafengwo.net/mfs/s18/M00/D3/B6/CoUBYGBwHSCAOHXmAAEXzc8likw94.jpeg?imageMogr2%2Fthumbnail%2F%21238x134r%2Fgravity%2FCenter%2Fcrop%2F%21238x134%2Fquality%2F100"
                height="134"
                width="238"
              />
              <div class="mark-tag">景区/场馆</div>
            </div>
            <div class="caption">
              <h3>广州塔460米摩天轮游玩套票（含450米塔顶户外观景平台 摩天轮游乐项目）</h3>
              <span class="sell">已售 247</span>
              <span class="price"><b>￥292</b>起</span>
              <span class="price-original">¥398</span>
            </div>
          </a>
        </li>
        <li class="item">
          <a href="/sales/2361182.html" target="_blank">
            <div class="image">
              <img
                src="https://sales.mafengwo.net/mfs/s10/M00/A5/43/wKgBZ1o8zGKAH9teAAGMp5UbAOI19.jpeg?imageMogr2%2Fthumbnail%2F%21238x134r%2Fgravity%2FCenter%2Fcrop%2F%21238x134%2Fquality%2F100"
                height="134"
                width="238"
              />
              <div class="mark-tag">景区/场馆</div>
            </div>
            <div class="caption">
              <h3>余荫山房电子门票</h3>
              <span class="sell">已售 6</span>
              <span class="price"><b>￥14.5</b>起</span>
              <span class="price-original">¥18</span>
            </div>
          </a>
        </li>
      </ul>
      <div class="getmore">
        <a href="/localdeals/0-0-10088-11-0-0-0-0.html" target="_blank">广州还有121个景点门票产品&gt;&gt;</a>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
.common-container {
  width: 1000px;
  margin: 0 auto;
  .mod-hd {
    height: 30px;
    margin-bottom: 15px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;
    line-height: 30px;
    h2 {
      float: left;
      width: 140px;
      font-size: 24px;
      font-weight: normal;
      color: #333;
    }
    .tab {
      float: left;
      font-size: 16px;
      li {
        float: left;
        display: inline;
        a {
          display: inline-block;
          float: left;
          padding: 0 6px;
          border-radius: 2px;
          color: #333;
          margin-right: 5px;
          &.on {
            background-color: #ff8a00;
            color: #fff;
          }
        }
      }
    }
  }
  .common-list {
    .sales-list {
      margin: 0 -15px 0 0;
      .item {
        float: left;
        width: 238px;
        display: inline;
        margin: 0 15px 15px 0;
        a {
          display: block;
          font-size: 14px;
          position: relative;
          height: 234px;
          &:hover {
            .caption {
              height: 115px;
              background-color: #f9f9f9;
              h3 {
                height: 80px;
              }
            }
          }
          .image {
            height: 134px;
            background: #e5e5e5 url(../../assets/images/logo-white.png) no-repeat center center;
            text-align: center;
            position: relative;
          }
          .caption {
            border: 1px solid #f1f1f1;
            padding: 5px 10px 18px;
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 75px;
            background-color: #fff;
            -webkit-transition: height 0.2s ease-in-out 0.1s;
            transition: height 0.2s ease-in-out 0.1s;
            h3 {
              height: 40px;
              margin-bottom: 15px;
              font-size: 14px;
              font-weight: normal;
              color: #000;
              line-height: 21px;
              overflow: hidden;
              -webkit-transition: height 0.2s ease-in-out 0.1s;
              transition: height 0.2s ease-in-out 0.1s;
            }
            .sell {
              float: right;
              padding-top: 8px;
              font-size: 12px;
              color: #666;
            }
            .price {
              color: #ff8a00;
              b {
                font-size: 22px;
              }
            }
          }
        }
        .mark-tag {
          position: absolute;
          left: 0;
          top: 0;
          padding: 0 7px;
          line-height: 26px;
          background-color: rgba(0, 0, 0, 0.7);
          color: #fff;
          font-size: 12px;
        }
      }
    }
    .getmore {
      clear: both;
      border-top: 1px solid #f1f1f1;
      text-align: center;
      padding: 16px 0 0;
      a {
        color: #192885;
        font-size: 16px;
      }
    }
  }
}
</style>
